<template>
    <div class="contenter dayReport1">
        <div class="center fontSize16 fontbold mt20 mb20">{{nowDate}}渠道报表</div>
        <div class="mb20" style="position: sticky;top: 0;">
            <van-dropdown-menu active-color="#4873c1">
                <van-dropdown-item v-model="brandVal" :options="brandList" @change='getChangeDrop' />

                <van-dropdown-item  v-model="dateVal" @open='goOpen' :options="dateList" ref="item">
                </van-dropdown-item>

                <van-dropdown-item v-model="typeVal" @change='getType' :options="option" ref="item">
                </van-dropdown-item>
            </van-dropdown-menu>
        </div>
        <div class="mainContent" v-if="reportList.list.length>0">
            <div v-for="(item,index) in reportList.list" :key="index" >
                <div class="title flex flexCenter alignCenter fontSize16 fontbold">{{item.name}}</div>
                <div class="flex alignCenter flexBetween subTitle colorfff fontSize13 flexCenter"  v-if="typeVal==1">
                    <div class="w14 flex flexCenter alignCenter">区域名称</div>
                    <div class="w14 flex flexCenter alignCenter">当天销售额(元)</div>
                    <div class="w14 flex flexCenter alignCenter">月累计销售额(元)</div>
                    <div class="w14 flex flexCenter alignCenter">月累计同期销售额(元)</div>
                    <div class="w14 flex flexCenter alignCenter">月累计同期提升比</div>
                </div>
                <div class="flex alignCenter flexAround subTitle colorfff fontSize13" v-if="typeVal==2">
                    <div class="w24 flex flexCenter alignCenter">区域名称</div>
                    <div class="w24 flex flexCenter alignCenter">月累消费人数</div>
                    <div class="w24 flex flexCenter alignCenter">年累消费人数</div>
                </div>
                <!--销售列表-->
                <div class="reportListContent" v-if="typeVal==1">
                    <div v-for='(e,elindex) in item.child' :key="elindex" class="flex flexBetween flexCenter">
                        <div class="w14 borderGray regionName flex flexCenter alignCenter">{{e.name}}</div>
                        <div class="w14 borderGray flex flexCenter alignCenter">{{e.thisDaySales}}</div>
                        <div class="w14 borderGray flex flexCenter alignCenter">{{e.thisMonthSales}}</div>
                        <div class="w14 borderGray flex flexCenter alignCenter">{{e.lastYearThisMonthSales}}</div>
                        <div class="w14 borderGray flex flexCenter alignCenter" :class="{'colorGreen':e.thisMonthLiftRate < 0,'colorRed':e.thisMonthLiftRate > 0}">{{e.thisMonthLiftRateText===''?'-':e.thisMonthLiftRateText}}</div>
                    </div>
                </div> 
                <!--销售小计-->
                <div class="flex flexBetween flexCenter colorBlue fontbold" v-if="typeVal==1">
                    <div class="w14 borderGray regionName flex flexCenter alignCenter">{{item.subtotal.name}}</div>
                    <div class="w14 borderGray flex flexCenter alignCenter">{{item.subtotal.thisDaySales}}</div>
                    <div class="w14 borderGray flex flexCenter alignCenter">{{item.subtotal.thisMonthSales}}</div>
                    <div class="w14 borderGray flex flexCenter alignCenter">{{item.subtotal.lastYearThisMonthSales}}</div>
                    <div class="w14 borderGray flex flexCenter alignCenter" :class="{' colorGreen':item.subtotal.thisMonthLiftRate<0,'colorRed':item.subtotal.thisMonthLiftRate > 0}">{{item.subtotal.thisMonthLiftRateText===''?'-':item.subtotal.thisMonthLiftRateText}}</div>
                </div>
                <!--vip列表-->
                <div class="reportListContent" v-if="typeVal==2">
                    <div v-for='(e,elindex) in item.child' :key="elindex" class="flex flexBetween flexCenter">
                        <div class="w24 borderGray flex flexCenter alignCenter">{{e.name}}</div>
                        <div class="w24 borderGray flex flexCenter alignCenter">{{e.thisMonthConsumersNumber}}</div>
                        <div class="w24 borderGray flex flexCenter alignCenter">{{e.thisYearConsumersNumber}}</div>
                    </div>
                </div>  
                <!--vip小计-->
                <div class="flex flexBetween flexCenter colorBlue fontbold" v-if="typeVal==2">
                    <div class="w24 borderGray flex flexCenter alignCenter">{{item.subtotal.name}}</div>
                    <div class="w24 borderGray flex flexCenter alignCenter">{{item.subtotal.thisMonthConsumersNumber}}</div>
                    <div class="w24 borderGray flex flexCenter alignCenter">{{item.subtotal.thisYearConsumersNumber}}</div>
                </div>         
            </div>
        </div>
        <!--总计-->
        <div class="flex flexBetween flexCenter Subtotal colorBlue fontSize15 fontbold" v-if="typeVal==1&&reportList.list.length>0">
            <div class="w14 borderGray">总计</div>
            <div class="w14 borderGray">{{reportList.total.thisDaySales}}</div>
            <div class="w14 borderGray">{{reportList.total.thisMonthSales}}</div>
            <div class="w14 borderGray">{{reportList.total.lastYearThisMonthSales===''?'-':reportList.total.lastYearThisMonthSales}}</div>
            <div class="w14 borderGray" :class="{'colorGreen':reportList.total.thisMonthLiftRate < 0,'colorRed':reportList.total.thisMonthLiftRate > 0}">{{reportList.total.thisMonthLiftRateText}}</div>
        </div>
        <div class="flex flexBetween flexCenter Subtotal colorBlue fontSize15 fontbold" v-if="typeVal==2&&reportList.list.length>0">
            <div class="w24 borderGray">总计</div>
            <div class="w24 borderGray">{{reportList.total.thisMonthConsumersNumber}}</div>
            <div class="w24 borderGray">{{reportList.total.thisYearConsumersNumber}}</div>
        </div>
        <div class="fontSize12 right mt5 color999" v-if="reportList.list.length>0">*数据以系统为准</div>
        <div class="center color999" style="margin-top:2rem" v-if="reportList.list.length==0">暂无数据~</div>
        <van-calendar v-model="show" @confirm="onConfirmDate" :min-date="minDate" :max-date="maxDate" />
    </div>
</template>
<script>
import { Toast} from 'vant'
export default{
    data(){
        return{
            typeVal:1,
            option: [
                { text: '销售额', value: 1 },
                { text: 'vip', value: 2 },
            ],
            brandVal:1,
            brandList:[],
            nowDate:'',
            reportList:{
                list:[],
                total:{}
            },
            dateVal:'',
            dateList:[],
            show:false,
            minDate: '',
            maxDate: '',
        }
    },
    created(){
        var date=new Date()
        var preDate=new Date(date.getTime() - (24*60*60*1000))
        let year=preDate.getFullYear()
        let month=preDate.getMonth() + 1
        let day= preDate.getDate()
        this.nowDate=`${year}-${month}-${day}`
        console.log('年月日',year,month,day)
        let obj={
            text: this.nowDate, value: day
        }
        this.dateVal=day
        this.dateList=[obj]
        this.minDate=new Date(2021, month, day)
        this.maxDate=new Date(year, preDate.getMonth(), day)
        this.getBrandList()
    },
    methods:{
        getBrandList(){
            let that=this
            this.$apiRequest.getBrandList({}).then(res=>{
                console.log('品牌列表',res)
                if(res.code==1){
                    res.data.map(i=>{
                        i.text=i.name
                        i.value=i.code
                    })
                    that.brandVal=res.data[0].code
                    that.brandList=res.data
                    that.getDayReportByChannel()
                    // that.getDayReportByRegion()
                }
            })
        },
        getDayReportByChannel(){
            Toast.loading({
                message: '加载中',
                forbidClick: true,
                duration:0
            })
            let obj={
                date:this.nowDate,
                //date:'',
                brandId:this.brandVal
            }
            console.log('提交参数',obj)
            this.$apiRequest.getDayReportByChannel(obj).then(res=>{
                console.log('渠道报表',res)
                if(res.code==1){
                    res.data.list.map(i=>{
                        i.subtotal=i.child.pop()
                    })
                    this.reportList=res.data
                    // console.log('this.reportList',this.reportList)
                }
                Toast.clear()
            })
        },
        getChangeDrop(e){
            console.log('下拉',e)
            this.brandVal=e
            this.getDayReportByChannel()
            // this.getDayReportByRegion()
        },
        getType(e){
            console.log('下拉啦啦啦',e)
            this.typeVal=e
        },
        goOpen(){
            this.show=true
        },
        onConfirmDate(date){
            // console
            this.show=false
            let activeDate=`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
            this.dateList=[{text:activeDate,value:date.getDate()}]
            this.dateVal=date.getDate()
            this.nowDate=activeDate
            this.getDayReportByChannel()
        }
    }
}
</script>
<style >
.dayReport1 .van-overlay{
    background-color: rgba(0, 0, 0, 0.9)
}
</style>
<style lang='less' scoped>
.w14{
    width: 1.4rem;
    padding: 0.14rem 0;
    text-align: center;
}
.w24{
    width: 2.4rem;
    padding: 0.14rem 0;
    text-align: center;
}
.contenter{
    width: 92%;
    margin: 0 auto;
    .title{
        background-color: rgba(83,114,192,0.1);
        padding: 0.1rem 0;
    }
    .mainContent{
        padding-bottom: 0.8rem;
    }
    .subTitle{
        background-color: #85aaee;
        .w14{
            height: 1rem;
        }
    }
    .reportListContent{
        max-height:6rem;
        overflow-y: scroll;
        .regionName{
            background-color: #f1f1f1;
        }
    }
    .borderGray{
        border:1px #eee solid
    }
}
.Subtotal{
    background: #fdebe8;
    position: fixed;
    width: 92%;
    bottom: 0.48rem;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}
</style>
